<script setup>
  import {useRoute, useRouter} from "vue-router";
  import useDetail from "@/stores/modules/detail";
  import {storeToRefs} from "pinia";
  import {computed, onMounted, ref, watch} from "vue";
  import DetailSwipe from "@/views/detail/cpns/Detail_01-Swipe.vue";
  import DetailInfos from "@/views/detail/cpns/Detail_02-infos.vue";
  import DetailFacilities from "@/views/detail/cpns/Detail_03-facilities.vue";
  import DetailLandlord from "@/views/detail/cpns/Detail_04-landlord.vue";
  import DetailComment from "@/views/detail/cpns/Detail_05-comment.vue";
  import DetailNotice from "@/views/detail/cpns/Detail_06-notice.vue";
  import DetailMap from "@/views/detail/cpns/Detail_07-map.vue";
  import DetailIntro from "@/views/detail/cpns/Detail_08-intro.vue";
  import DetailTab from "@/components/detailTab/DetailTab.vue";
  import useScroll from "@/hooks/useScroll";

  const route = useRoute()
  const router = useRouter()
  const detailStore = useDetail()

  const onClickLeft = () => {
    router.back()
  }

  //请求房屋数据
  // detailStore.fetchHouseDetail(route.params.id)
  //拿到房屋数据
  // const {detailInfos} = storeToRefs(detailStore)
  // const mainPart = computed(() => detailInfos.value.mainPart)

  //派发给多组件的数据暂时不要用pinia
  const detailInfos = ref({})
  const mainPart = computed(() => detailInfos.value.mainPart)
  detailStore.fetchHouseDetail(route.params.id).then(res => {
    detailInfos.value = res
  })

  //监听页面滚动
  const detailRef = ref()
  const {scrollTop} = useScroll(detailRef)
  //监听显示隐藏tab
  const showTab = computed(() => scrollTop.value > 400)

  //将组件的根元素添加进数组里面
  const sectionEls = ref({})
  const titles = computed(() => Object.keys(sectionEls.value))
  const getSectionRef = value => {
    //组件销毁时也会执行一次这个函数，所以需要判空
    if (!value) return
    const name = value.$el.getAttribute('name')
    sectionEls.value[name] = value.$el
  }
  //监听tab点击
  let isClick = false
  //监听是否滚动到想要滚动的位置
  let currentDistance = -1
  const clickTab = index => {
    const key = Object.keys(sectionEls.value)[index]
    const el = sectionEls.value[key]
    let distance = index !== 0 ? el.offsetTop - 44
        : el.offsetTop - 10

    isClick = true
    currentDistance = distance
    //滚动到指定位置
    detailRef.value.scrollTo({
      //offsetTop表示元素距离顶部的距离
      top: distance,
      behavior: 'smooth' //平滑滚动
    })
  }

  //ref绑定组件
  const tabRef = ref()
  //页面滚动时匹配tab
  watch(scrollTop, newValue => {
    if (newValue === currentDistance) isClick = false
    if (isClick) return
    //获取所有区域的offsetTop
    const els = Object.values(sectionEls.value)
    const values = els.map(element => element.offsetTop)
    //根据scrollTop匹配索引
    let index = values.length - 1
    for (let i = 0; i < values.length; i++) {
      if (values[i] > newValue + 44) {
        index = i - 1
        break
      }
    }
    //设置组件的索引值
    if (tabRef.value && index !== tabRef.value.recordCount) {
      tabRef.value.recordCount = index
    }
  })
</script>

<template>
  <div class="detail topPage" ref="detailRef">
    <van-nav-bar title="房屋详情" left-text="旅途"
                 left-arrow @click-left="onClickLeft"/>

    <!--主要内容-->
    <div class="main" v-if="mainPart" v-memo="[mainPart]">
      <!--轮播图-->
      <detail-swipe :swipeData="mainPart.topModule.housePicture.housePics"/>

      <!--信息-->
      <DetailInfos name="描述" :ref="getSectionRef" :topInfos="mainPart.topModule"/>

      <!--详情-->
      <detail-facilities name="设施" :ref="getSectionRef"
                         :houseFacility="mainPart.dynamicModule.facilityModule.houseFacility"/>

      <!--房东介绍-->
      <detail-landlord name="房东" :ref="getSectionRef"
                       :landlord="mainPart.dynamicModule.landlordModule"/>

      <!--热门评论-->
      <detail-comment name="评论" :ref="getSectionRef"
                      :comment="mainPart.dynamicModule.commentModule"/>

      <!--预定须知-->
      <detail-notice name="须知" :ref="getSectionRef"
                     :order-rules="mainPart.dynamicModule.rulesModule.orderRules"/>

      <!--地图-->
      <detail-map name="周边" :ref="getSectionRef"/>

      <!--价格说明-->
      <detail-intro :price-intro="mainPart.introductionModule"/>
    </div>

    <!--安心订-->
    <div class="footer">
      <!--<img src="@/assets/img/detail/icon_ensure.png" alt="">-->
      <div class="text">弘源旅途, 永无止境!</div>
    </div>

    <!--顶部tab-->
    <detail-tab :tab-names="titles" ref="tabRef"
                v-if="showTab" class="tab" @clickTab="clickTab"/>
  </div>
</template>

<style lang="less" scoped>
  .detail {
    background: white;

    .footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 120px;

      img {
        width: 123px;
      }

      .text {
        margin-top: 12px;
        font-size: 12px;
        color: #7688a7;
      }
    }

    .tab {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10;
    }
  }
</style>